<template>
    <!-- 毕业人数增长率 -->
  <div class="barChart"></div>
</template>

<script>
import { getStudent } from "@/api/page2Api";
export default {
  name: "",
  data() {
    return {
      data: [],
      cityData: [],
      experData: {},
      job1: [],
      job2: [],
      job3: [],
      xDate1: [],
      xDate2: [],
      sData: [],
      rData: [],
    };
  },
  methods: {
    getData() {
      getStudent().then((res1) => {
        let res = res1.data;
        this.xDate1 = res.rate.map((it) => it.date);
        this.xDate2 = res.student.map((it) => it.date);
        this.rData = res.rate.map((it) => it.incr);
        this.sData = res.student.map((it) => it.num);
        this.setChart();

        console.log(this.sData,this.rData, "ahhahahah");
      });
    },
    setChart() {
      let option = {
        title: {
          text: "毕业人数与增长率",
          x: "center",
          top: "5%",
          left: "0%",
          textStyle: {
            fontSize: 12,
            color: '#75deef',
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
            textStyle: {
              color: "#fff",
            },
            top: "5%",
            right: "0%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: this.xDate1,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            nameTextStyle: {
              color: "#fff",
            },
          },
          {
            type: "category",
            boundaryGap: true,
            data: this.xDate2,
            show:false
          },
        ],
        yAxis: [
                     {
            type: "value",
            scale: true,
            name: "增长率",
            // max: 100,
            // min: 0,
            boundaryGap: [0.2, 0.2],
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            nameTextStyle: {
              color: "#fff",
            },

          },
          {
            type: "value",
            name: "人数",
            boundaryGap: [0.2, 0.2],
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            nameTextStyle: {
              color: "#fff",
            },
          },
 
        ],
        series: [
          {
            name: "毕业人数",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: this.sData,
            itemStyle: {
              color: 'rgb(48,183,255)',
            }
          },
          {
            name: "增长率",
            type: "line",
            data: this.rData,
            // lineStyle: {
            //   color: "orange"
            // }
          },
        ],
      };
      let myChart = this.$echarts(this.$el);

      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>